<template>
  <div class="wrap address">
    <div class="title">
      <div>
        <div>我的賬戶</div>
        <div></div>
        <div>地址管理</div>
      </div>
      <div class="address_add" @click="addAddress">
        新增收貨地址
      </div>    

    </div>
    <div class="content">
      <div class="left">
        <img src="@/assets/myadd.png" alt="">
        <div>收貨地址</div>
      </div>
      <div class="right">
        <el-table :data="tableData" style="width: 100%"   ref="singleTable" :header-cell-style="tableHeaderColor">
          <el-table-column label="收貨人" align="center">
              <template slot-scope="scope">{{scope.row.name}}</template>
          </el-table-column>
          <el-table-column label="手機" align="center">
              <template slot-scope="scope">{{scope.row.tel}}</template>
          </el-table-column>
          <el-table-column label="所在地區" align="center">
              <template slot-scope="scope">{{scope.row.province}}{{scope.row.city}}{{scope.row.county}}</template>
          </el-table-column>
          <el-table-column label="詳細地址" align="center">
              <template slot-scope="scope">{{scope.row.addressDetail}}</template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope" >
              <div class="otherBox" >
                <div>
                  <div @click="handleEdit(scope.$index, scope.row)">編輯</div>
                  <div></div>
                  <div @click="handleDelete(scope.$index, scope.row)">刪除</div>
                </div>  
                <div :class='scope.row.isDefault == true?"selectbtn":"unselectbtn"' @click="changeDefault(scope.$index, scope.row)">默認地址</div>               
              </div>
            </template>
          </el-table-column>
        </el-table>

        <!-- <el-table
          stripe
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="name"
            label="收貨人"
          >
          </el-table-column>
          <el-table-column
            prop="city"
            label="手機"
          >
          </el-table-column>
          <el-table-column
            prop="city"
            label="所在地區"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            width="220px"
            label="詳細地址">
          </el-table-column>
          <el-table-column 
            label="操作"
            width="150px">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">編輯</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">刪除</el-button>
            </template>
          </el-table-column>
          <el-table-column
            label=""
            width="120px"
            >
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>姓名: {{ scope.row.name }}</p>
                <p>住址: {{ scope.row.address }}</p>
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">{{ scope.row.name }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
        </el-table> -->
      </div>
    </div>

    <!-- 添加彈框 -->
    <div class="addressBox"> 
      <el-dialog width="30%" :title="!isEdit?'新增地址':'修改地址'" :visible.sync="dialogFormVisible">
        <el-form :model="user" :rules="rules" ref="userFrom" label-width="150px">   
          <el-form-item label="收貨人：" prop="name">
            <el-input v-model="user.name" placeholder="請輸入收貨人姓名"></el-input>
          </el-form-item>
          <el-form-item label="所在區域：" required>
            <div class="selectAddress" >
              <v-distpicker :placeholders="placeholders" province-disabled @province="onChangeProvince" @city="onChangeCity" @selected="onSelected" :province='user.province' :city='user.city' :area='user.county' ></v-distpicker>
            </div>  
          </el-form-item>
          <el-form-item label="詳細地址：" prop="addressDetail">
            <el-input type="textarea" :rows="4" v-model="user.addressDetail" placeholder="請輸入詳細地址"></el-input>
          </el-form-item>
          <el-form-item label="手機號碼：" prop="tel">
            <el-input v-model="user.tel" placeholder="請輸入手機號碼"></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-checkbox  v-model="user.isDefault"  @change='isaccept'>設為默認地址</el-checkbox>
          </el-form-item>
          <el-form-item>
            <div class="btnbox">
              <div @click="onSubmit('userFrom')" class="savebtn">保存地址</div>
              <div @click="dialogFormVisible = false">取消</div>
            </div>            
          </el-form-item>
        </el-form>
        <!-- <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">確 定</el-button>
        </div> -->
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {addresslist,addressAddUpdate,addressDetail,addressDelete,updateDefaultAdd} from '@/api/user';
import {validatePhoneTwo,validateEMail,validatePassword,validateReferral,validateXing,validateMonth,validateDay} from '@/utils/validate';
import { getToken,removeToken } from '@/utils/auth' // 驗權
const defaultUser = {
  name: "",//收貨人
  province:'香港特别行政区',//省份
  city:'',//市
  county:'',//區
  addressDetail:'',//詳情
  areaCode:'',//
  tel:'',//電話
  isDefault:true,//默認
  postalCode:'',
  userId:getToken(),
  id:0
};
export default {
  data(){
    return{
      tableData:null,
      isEdit:false,//添加地址標誌
      dialogTableVisible: false,
      dialogFormVisible: false,
      user: Object.assign({}, defaultUser),
      addressText:{
        province:'香港特别行政区',//省份
        city:'',//市
        county:'',//區
      },
      placeholders: {
        province:'香港特别行政区',//省份
        city: '請選擇市',
        area: '請選擇區',
      },
      rules: {
        name:[{required: true, message: '請輸入收貨人', trigger: 'blur'}],
        email:[{required: true, message: '請輸入郵箱', trigger:'blur'}, {validator: validateEMail, trigger: 'blur' }],
        tel:[{required:true,message:'請輸入手機號',trigger: 'blur'}],
        addressDetail:[{required: true, message: '請輸入詳細地址', trigger: 'blur'}],
        province:[{required: true, message: '請輸入詳細地址', trigger: 'blur'}],
      },
      formLabelWidth: '120px',
      
    }
  },
  mounted(){
    this.getdata()
  },
  methods: {
    getdata(){
      addresslist({userId:getToken()}).then(response => {
        if(response.errno == 0){
          this.tableData = response.data.list
        }
      }) 
    },
    onChangeProvince(data){
      // console.log(data)
    },
    onChangeCity(data){
      // console.log(data)
    },
    onSelected(data) {
      // 選擇省市區
      console.log(data)
      // console.log(data.province.value+data.city.value+data.area.value)
      // this.addressText.province = data.province.value;
      // this.addressText.city = data.city.value;
      // this.addressText.county = data.area.value;
      this.user.province = data.province.value;
      this.user.city = data.city.value;
      this.user.county = data.area.value;
    },
    // 設為默認地址
    isaccept(){

    }, 
    // 添加修改地址提交按鈕
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if(this.user.province == '' || this.user.city == '' || this.user.county == ''){
            this.$message({
              type:'error',
              message:'請選擇省市區'
            })
          }else{
            if(!this.isEdit){
              addressAddUpdate(this.user).then(response => {
                if(response.errno == 0){
                  this.$message({
                    type:'success',
                    message:'添加成功'
                  })
                  this.dialogFormVisible = false
                  this.getdata()
                }else{
                  this.$message({
                    type:'error',
                    message:response.errmsg
                  })
                }
                console.log(response)
              })
            }else{
              addressAddUpdate(this.user).then(response => {
                if(response.errno == 0){
                  this.$message({
                    type:'success',
                    message:'修改成功'
                  })
                  this.dialogFormVisible = false
                  this.getdata()
                }else{
                  this.$message({
                    type:'error',
                    message:response.errmsg
                  })
                }
                console.log(response)
              })
            }           
          }
          console.log(this.user)
          
        }else{
          this.$message({
            message: '表單驗證失敗，請修改後重新提交',
              type: 'error',
              duration:1000
          });
          return false;
        }
      });
    },
    // 打開添加地址彈框
    addAddress(){
      this.user = Object.assign({}, defaultUser)
      this.dialogFormVisible = true
      this.isEdit = false
    },
    tableHeaderColor({row,column,rowIndex,columnIndex}){
      return 'background: #F5F5F5;height:50px;font-size: 18px;font-weight: 400;color: #2E4881;line-height: 50px;'
    },
    // 編輯地址彈框
    handleEdit(index, row) {
      addressDetail({"addressId":row.id ,"userId": getToken()}).then(response => {
        if(response.errno == 0){
          this.user = response.data
          this.dialogFormVisible = true
          this.isEdit = true
        }else{
          this.$message({
            type:'error',
            message:'暫時無法編輯'
          })
        }
      })
    },
    // 刪除地址
    handleDelete(index, row) {
      this.$confirm('確定要刪除該地址, 是否繼續?', '提示', {
        confirmButtonText: '確定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        addressDelete({"id":row.id ,"userId": getToken()}).then(response => {
          if(response.errno == 0){
            this.$message({
              type:'success',
              message:'刪除成功'
            })
            this.getdata()
          }else{
            this.$message({
              type:'error',
              message:'暫時無法刪除'
            })
          }
        })
      }).catch(() => {
                
      });
      
    },
    // 設為默認地址
    changeDefault(index,row){
      if(!row.isDefault){
        this.$confirm('確定設置該地址為默認地址, 是否繼續?', '提示', {
          confirmButtonText: '確定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          updateDefaultAdd({"id":row.id ,"userId": getToken()}).then(response => {
            if(response.errno == 0){
              this.$message({
                type:'success',
                message:'默認地址設置成功'
              })
              this.getdata()
            }else{
              this.$message({
                type:'error',
                message:'暫時無法設置默認地址'
              })
            }
          })
        }).catch(() => {
                  
        });
      }      
    }
  }
}
</script>
<style >
.address .el-table .cell{    line-height: inherit!important;}
</style>
<style scoped>
  .wrap{
    width: 100%;
    /* height: 1358px; */
    background: #FFFFFF;
    box-sizing: border-box;
    padding: 15px;
  }
  
  .title{
    width: 100%;
    box-sizing: border-box;
    padding: 10px 20px 20px 20px;
    border-bottom: 1px solid #F5F5F5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .title>div:nth-child(1){
    display: flex;
    align-items: center;
    box-sizing: border-box;
  }
 .title>div:nth-child(1)>div:nth-child(1){
    font-size: 19px;
    font-weight: bold;
    color: #333333;
    border-bottom: 3px solid #333333;
  }
  .title>div:nth-child(1)>div:nth-child(2){
    width: 8px;
    height: 2px;
    background: #333333;
    margin: 0px 10px;
  }
  .title>div:nth-child(1)>div:nth-child(3){
    font-size: 19px;
    font-weight: bold;
    color: #333333;
    border-bottom: 3px solid #333333;
  }
  .title>div:nth-child(2){
    width: 124px;
    height: 34px;
    background: #2E4881;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 34px;
    text-align: center;
    cursor: pointer;
  }
  .content{
    width: 100%;
    display: flex;
  }
  .left{
    margin-top:42px;
    height: 213px;
    border-right: 1px solid #E5E5E5;
  }
  .left img{
    width: 78px;
    height: 80px;
    padding: 20px 47px 20px 45px;
  }
  .left div{  
    text-align: center; 
    font-size: 17px;
    font-family: SourceHanSansSC;
    font-weight: bold;
    color: #333333;
    padding-bottom:80px;
  }
  .right{
    width: 80%;
    margin:10px 10px;
    /* border:1px solid #E5E5E5; */
  }
  .otherBox{
    display: flex;
    align-items: center;
    box-sizing: border-box;
   
  }
  .otherBox>div:nth-child(1){
    display: flex;
    align-items: center;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 12px;
    font-weight: 400;
    color: #333333;
    line-height: 30px;
    margin-right: 10px;
  }
  .otherBox>div:nth-child(1)>div:nth-child(2){
    width: 1px;
    margin: 0px 3px;
    height: 25px;
    background: #333333;
  }
   /* .otherBox>div:nth-child(2){
     cursor: pointer;
    } */
  .unselectbtn{
    width: 49px;
    font-size: 12px;
    font-weight: 400;
    color: #2E4881;
    line-height: 30px;
    cursor: pointer;
  }
  .selectbtn{
  
    height: 30px;
    border: 1px solid #2E4881;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
    color: #2E4881;
    line-height: 30px;
    text-align: center;
  }
  .addressBox>>>.el-dialog__header{
    border-bottom: 1px solid #E3E3E3;;
  }
  .selectAddress>>>.distpicker-address-wrapper select{
    padding: 0px;
    /* line-height: 30px; */
    font-size: 14px;
    border-radius: 4px;
    border-color: #DCDFE6;
  }
  .selectAddress>>>.distpicker-address-wrapper select:hover{
    border-color: #DCDFE6;
    /* outline-color:#DCDFE6; */
  }
  .selectAddress>>>.distpicker-address-wrapper select:focus {
    /* outline: -webkit-focus-ring-color auto 1px;  */
    /* outline-color:#DCDFE6; */
    outline: none;
  }
  /* select:not(:-internal-list-box) */
  .addressBox>>>.el-checkbox__inner:hover{
    border-color: #E5E5E5;
  }
  .addressBox>>>.el-checkbox__inner.is-focus,.addressBox>>>.el-checkbox__inner{
    background: #E5E5E5;
    border-color: #E5E5E5;
  }
  /* 多選選中 */
  .addressBox>>>.el-checkbox__inner::after{
    border-color: #FF4400;
  }
  /* 不全選 */
  .addressBox>>>.el-checkbox__input.is-indeterminate .el-checkbox__inner::before{
    background: #FF4400;
  }
  .addressBox>>>.el-checkbox__input.is-checked .el-checkbox__inner, .addressBox>>>.el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background: #E5E5E5;
    border-color: #E5E5E5;
  }
  .addressBox>>>.el-checkbox__input.is-checked+.el-checkbox__label{
    color: #606266;
  }
  .addressBox>>>.el-dialog__headerbtn .el-dialog__close:hover{
    color: #FF4400;
  }
  .btnbox{
    display: flex;
    align-items: center;
  }
  .btnbox>div:nth-child(1){
    width: 84px;
    font-size: 14px;
    font-weight: 300;
    color: #FFFFFF;
    line-height: 40px;
    background: #C95959;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
  }
  .btnbox>div:nth-child(2){
    width: 62px;
    border: 1px solid #999999;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 300;
    color: #333333;
    line-height: 40px;
    text-align: center;
    margin-left: 20px;
    cursor: pointer;
  }
</style>